<template>
  <div>
    <Add :add="add"/>
    <List :comments="comments" :remove="remove"/>
  </div>
</template>

<script>
  import Add from "./add/Add"
  import List from "./list/List"

  export default {
    name: "Comment",
    components: {
      Add,
      List
    },
    data() {
      return {
        // 数据定义在哪个组件，更新数据的行为就应该定义在哪个组件
        comments: [
          {
            name: "a",
            comment: "1"
          },
          {
            name: "b",
            comment: "2"
          },
          {
            name: "c",
            comment: "3"
          }
        ]
      }
    },
    methods: {
      add(v) {
        this.comments.unshift(v);
      },
      remove(i) {
        this.comments.splice(i, 1)
      }
    }
  }
</script>

<style scoped>

</style>
